<template>
  <div class="square-list w700">
    <div class="square-ul">
      <div class="item-flex-row">
        <rank-cardimg
          v-for="(item, index) in squarelist"
          :key="index"
          :imgUrl="item.coverImgUrl || item.picUrl"
          :dec="item.name"
          :updateTime="item.updateFrequency"
          :idx="item.name"
          @showIdxPage="showIdxPage(item)"
          :playCount="item.playCount"
        ></rank-cardimg>
      </div>
      <van-loading v-show="more" type="circular" color="#fff" vertical>努力加载中...</van-loading>
    </div>
  </div>
</template>

<script>
import Scroll from "@/base/scroll/scroll";
import { mapMutations } from "vuex";
import RankCardimg from "@/base/rank-card/rank-cardImg.vue";
export default {
  name: "squarelist",
  props: {
    squarelist: {
      type: Array
    },
    more: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    showIdxPage(item) {
      console.log(item);
      this.$router.push({
        name: "songsheet",
        query: { id: item.id }
      });
      this.setSonngSheet(item);
      this.setSongSheetType("歌单");
    },
    ...mapMutations({
      setSonngSheet: "SET_SONGSHEET",
      setSongSheetType: "SET_SONGSHEET_TYPE"
    })
  },

  components: {
    RankCardimg,
    Scroll
  }
};
</script>

<style lang="less" scoped>
.square-list {
  height: 100%;
}
.square-ul {
  .item-flex-row {
    // padding: 0 20px;
    .flex-row-wrap;
  }
}
</style>